<template>
    <div class="card" style="height:100%;width:100%;overflow:hidden;">
        <!-- header -->
        <div class="card-header">
            <p class="card-title">{{ header }}</p>
        </div>
        <!-- 中间内容展示的样式布局分组 -->
        <div class="content">
            <ul class="content-ul" v-if="contentStyle == 'four'">
                <li class="header-li">
                    <p class="filename">{{ $t('webAuto.fileName') }}</p>
                    <p class="publisher">{{ $t('webAuto.publisher') }}</p>
                    <p class="releaseTime">{{ $t('webAuto.ReleaseTime') }}</p>
                </li>
                <li class=" content-list header-li" v-for="(item, index ) in list" :key="index"
                    @click="readClick2(item)">
                    <p class="filename">
                        <a target="_blank" class="title" @click="skipClick(item)">{{ item.name }}
                        </a>
                    </p>
                    <p class="publisher">{{ item.personname }}</p>
                    <p class="releaseTime">{{ item.createTime }}</p>
                </li>
            </ul>
            <ul class="content-ul" v-else>
                <li class="second-li list-li" v-for="(item, index ) in list" :key="index" @click="readClick(item)">
                    <span :class="contentStyle == 'first' ? 'title-text2' : 'title-text'">
                        <a target="_blank" class="title" @click="skipClick(item)">
                            <!-- 小黑点 -->
                            <span style="margin-right: 5px;"
                                v-if="contentStyle == 'third' || contentStyle == 'first'">●</span>
                            <!-- 标题 -->
                            <span style="margin-right: 5px;" v-if="contentStyle == 'second'">{{ '[' + header + ']'
                                }}</span>
                            <!-- 内容 -->
                            {{ item.title }}
                        </a>
                    </span>
                    <span class="time" v-if="contentStyle != 'first'">{{ item.created }}</span>
                </li>
            </ul>
        </div>
        <!-- footer -->
        <div class="more">
            <span class="icon" @click="moreClick">{{ $t('webAuto.more') }}</span>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
/**
     * Card 内容卡
     * @description
     * @property {String} header 标题
     * @property {String} contentStyle 中间内容用那个风格展示first:小圆点+内容 second：标题+内容,时间 third小圆点+内容：,时间  four:表格形式，有表头名称+内容列表
     * @property {Array} list 中间内容展示的数据
*/
const props = defineProps({
    header: {
        type: String,
        default: ''
    },
    contentStyle: {
        type: String,
        default: 'first'
    },
    list: {
        type: Array,
        default: []
    }
})
const emit = defineEmits(['setTime']);
// 触发向父组件传值
// 跳转 列表点击跳转
const skipClick = (item) => {
    // console.log('跳转', item)
    emit('setTime', '传递内容')
}

// 路由跳转
const router = useRouter()
const moreClick = () => {
    if (props.contentStyle == 'four') {
        const { href } = router.resolve({ path: '/document' });
        window.open(href, '_blank');
    } else {
        const { href } = router.resolve({ path: '/limits' });
        window.open(href, '_blank');
    }

}

const readClick = (item) => {
    // 判断是否pdf作为正文
    if (item.isPdf == 'Y') {
        let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
            `${item.filePath}?name=${'文件预览'}`))
        window.open(previewUrl)
    } else {
        const { href } = router.resolve({ path: `/read` });
        window.open(href + '?uuid=' + item.uuid, '_blank');
    }
}
const readClick2 = (item) => {
    // 判断是否pdf作为正文
    let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
        `${item.url}?name=${'文件预览'}`))
    window.open(previewUrl)
}
const base64Encode = (str) => {
    // console.log(str)
    // 将字符串转换为 Uint8Array
    const bytes = new TextEncoder().encode(str);
    // 使用 btoa() 方法进行 Base64 编码
    return btoa(String.fromCharCode.apply(null, bytes));
}
</script>

<style scoped lang="less">
* {
    padding: 0;
    margin: 0;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: none;
    font-size: 13px;
    color: #676a6c;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
}

.card-title {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    font-size: 17px;
    height: 45px;
    line-height: 46px;
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 0 15px;
    box-sizing: border-box;
    margin: 0 !important;
}

.content {
    flex: 1;
    font-size: 13px;
    color: #676a6c;
    padding: 10px 10px 10px 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.more {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    text-align: right;

    .icon {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: relative;
        font-size: 16px;
        cursor: pointer;
        font-size: 16px;
        color: rgb(51, 51, 51);
    }

    .icon::before {
        content: '+';
        position: absolute;
        left: -20px;
        top: -4px;
        content: '+';
        font-size: 26px;
        font-weight: 600;
    }
}

.el-card__header {
    padding: 0 !important;
}

.content-ul {
    padding: 0;
    margin: -5px 0 -5px 0;
    list-style: none;
    overflow: hidden;
    white-space: nowrap;

    .list-li {
        height: 38px;
        line-height: 38px;
        border-top: solid 1px #e8e8e8;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
    }

    .list-li:first-child {
        border-top: none;
    }

    .title {
        font-family: 微软雅黑;
        height: 20px;
        white-space: nowrap;
        font-size: 14px;
        width: 100%;
        background: linear-gradient(to right, #79b989, #e34b4b) no-repeat right bottom;
        /*即下划线（背景图）在默认情况下宽度为0 */
        background-size: 0 2px;
        /* 设定过度时间 */
        transition: background-size 1300ms;
    }

    .title:hover {
        cursor: pointer;
        /* 悬停 下划线的横向滑动位置为左 */
        background-position-x: left;
        /* 设定下划线宽度为100%展示 */
        background-size: 100% 2px;
    }

}

.second-li {
    display: flex;
    flex-direction: row;
    white-space: normal;

    .title-text {
        display: inline-block;
        width: 75%;
        overflow: hidden;
        padding-left: 5px;
        white-space: nowrap;
    }

    .title-text2 {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        padding-left: 5px;
        white-space: nowrap;
    }

    .time {
        display: inline-block;
        flex: 1;
        text-align: right;
        padding-right: 5px;
    }
}

.header-li {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    border: none;
    font-weight: 100;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: solid 1px #e8e8e8;
    overflow: hidden;

    .filename {
        flex: 1;
        padding: 0 8px;
        overflow: hidden;

        .title {
            width: 100%;
            font-size: 12px;
            background: linear-gradient(to right, #79b989, #e34b4b) no-repeat right bottom;
            /*即下划线（背景图）在默认情况下宽度为0 */
            background-size: 0 2px;
            /* 设定过度时间 */
            transition: background-size 1300ms;
        }

        .title:hover {
            /* 悬停 显示鼠标显示为手的形状*/
            cursor: pointer;
            /* 悬停 下划线的横向滑动位置为左 */
            background-position-x: left;
            /* 设定下划线宽度为100%展示 */
            background-size: 100% 2px;
        }
    }



    .publisher {
        width: 65px;
        padding: 0 8px;
        text-align: right;
    }

    .releaseTime {
        width: 80px;
        padding: 0 8px;
        text-align: right;
    }
}

.content-list {
    color: #666;
    overflow: hidden;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
}

.content-list:nth-child(even) {
    background-color: #f9f9f9;
}
</style>
